{% extends "stocksys/base/base_page.html" %}
{% load staticfiles %}
{% block headscript %}
    <style>
        .a:visited {
            color: unset;
        }

        .a:hover {
            color: unset;
        }

        .a {
            color: unset;
        }

        .a:active {
            color: unset;
        }
    </style>
    <script src="{% static 'stocksys/js/echarts.min.js' %}" type="text/javascript" charset="utf-8"></script>
    <script src="{% static 'stocksys/js/k-line.js' %}" type="text/javascript" charset="utf-8"></script>
    {% csrf_token %}

    <script>
        var year = new Date().getFullYear();
        var csrf = $('input[name="csrfmiddlewaretoken"]').val();

        function set_k_line(id, code, addr) {
            var url = "/stocksys/market_index_info/" + code + "/" + addr + "/" + year;
            $.ajax({
                url: url,
                data: {'csrfmiddlewaretoken': csrf},
                dataType: "json",
                type: "POST",
                success: function (data) {
                    kdata = data["data"];
                    content_box = document.getElementById(id);
                    var kChart = echarts.init(content_box);
                    kChart.setOption(initKOption(kdata));
                    $(content_box.children[0].children).css({"width": "100%", "height": "100%"});
                    $(content_box.children[0]).css({"width": "100%", "height": "100%"});

                },
                error: function (xhr, status, error) {

                }
            });
        }
    </script>
{% endblock %}
{% block content %}
    <div class="content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-lg-3 col-md-6 col-sm-6">
                    <div class="card">
                        <div class="content">
                            <div class="row">
                                <div class="col-xs-5">
                                    <div class="icon-big icon-warning text-center">
                                        <i class="ti-stats-up"></i></a>
                                    </div>
                                </div>
                                <div class="col-xs-7">
                                    <div class="numbers">
                                        <p>增长排行</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="card-footer">
                            <div class="stats">
                                <i class="ti-alert text-warning"></i> 最大涨跌幅
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6 col-sm-6">
                    <div class="card">
                        <div class="content">
                            <div class="row">
                                <div class="col-xs-5">
                                    <div class="icon-big icon-danger text-center">
                                        <i class="ti-receipt"></i>
                                    </div>
                                </div>
                                <div class="col-xs-7">
                                    <div class="numbers">
                                        <p>股市新闻</p>
                                        {{ borrowed }}
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="card-footer">
                            <div class="stats">
                                <i class="ti-tag text-warning"></i> 股市新闻
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6 col-sm-6">
                    <div class="card">
                        <div class="content">
                            <div class="row">
                                <div class="col-xs-5">
                                    <div class="icon-big icon-success text-center">
                                        <i class="ti-money"></i>
                                    </div>
                                </div>
                                <div class="col-xs-7">
                                    <div class="numbers">
                                        <p>我的资金</p>
                                        {{ sysconf.my_capital }}
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="card-footer">
                            <div class="stats">
                                <i class="ti-calendar"></i> 模拟策略
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6 col-sm-6">
                    <div class="card">
                        <div class="content">
                            <div class="row">
                                <div class="col-xs-5">
                                    <div class="icon-big icon-info text-center">
                                        <i class="ti-twitter"></i>
                                    </div>
                                </div>
                                <div class="col-xs-7">
                                    <div class="numbers">
                                        <p>持仓盈亏</p>
                                        {{ open_intrest_profit_and_loss }}
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="card-footer">
                            <div class="stats">
                                <i class="ti-reload"></i> 创业融资
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                {% for market in markets %}
                    <div class="col-md-6">
                        <div id="big_stock" class="card" style="min-height: 350px">
                            <div class="header card-header-icon">
                                <h4 class="title" id="stock_name"><i class="ti-pulse"></i> {{ market.name }}
                                </h4>
                            </div>
                            <div class="content " id="k-content-{{ market.code }}.{{ market.exchange_address.id }}"
                                 style="height:300px ;padding: 10px"></div>
                        </div>
                        <script>
                            set_k_line("k-content-{{ market.code }}.{{ market.exchange_address.id }}", "{{ market.code }}", "{{ market.exchange_address.id }}")
                        </script>

                    </div>
                {% endfor %}
            </div>
            <div class="row">
                <table id="datatables" class="table table-striped table-no-bordered table-hover">
                    <thead>
                    <tr>
                        <th>系统信息</th>
                        <th>值</th>
                    </tr>
                    <tbody>
                    <tr>
                        <th>今日可调用数据总条数</th>
                        <th>{{ count.total }}</th>
                    </tr>
                    <tr>
                        <th>今日剩余可调用条数</th>
                        <th>{{ count.spare }}</th>
                    </tr>
                    </tbody>
                </table>
            </div>
            <div class="row">
                <div class="col-lg-3 col-sm-6">
                    <div class="card card-circle-chart" data-background="color" data-color="orange"
                         style="min-height: 350px">
                        <div class="header text-center">
                            <h5 class="title">模拟最大盈亏</h5>
                            <p class="description">过去 30 天</p>
                        </div>
                        <div class="content">
                            <div id="chartNewVisitors" class="chart-circle" data-percent="95">20%</div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3 col-sm-6">
                    <div class="card card-circle-chart" data-background="color" data-color="brown"
                         style="min-height: 350px">
                        <div class="header text-center">
                            <h5 class="title">交易最大盈亏</h5>
                            <p class="description">过去 30 天</p>
                        </div>
                        <div class="content">
                            <div id="chartSubscriptions" class="chart-circle" data-percent="9">0.9%</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}


{% block pagescript %}


{% endblock %}

